Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding sortable tables #6338

Merged
merged 23 commits into from
Nov 13, 2024
Merged

Adding sortable tables #6338

merged 23 commits into from
Nov 13, 2024

Conversation

matthewshaver
Copy link
Contributor

@matthewshaver matthewshaver commented Oct 22, 2024 •
edited
Loading

What are you changing in this pull request and why?

Adding sortable tables by wrapping markdown in react.

Static tables function the same. To make a sortable table would wrap markdown table with :

<SortableTable>

{`

Markdown table here

`}

</SortableTable>

I couldn't successfully format this so that the { } are not required.

I also couldn't figure out how to enforce this globally (which was a request). It has to be implemented purposefully.

In the UI this will put light grey arrows to the right of the headers. When users click the arrows it will sort the table according to the column and the directional arrow will be darker. There is no "reset," but if the user reloads the page, the table will be in the original order if it wasn't alphabetical by the first column already (which it really should be unless it's a connections config table).

Checklist

  • I have reviewed the Content style guide so my content adheres to these guidelines.
  • The topic I'm writing about is for specific dbt version(s) and I have versioned it according to the version a whole page and/or version a block of content guidelines.
  • I have added checklist item(s) to this list for anything anything that needs to happen before this PR is merged, such as "needs technical review" or "change base branch."
  • The content in this PR requires a dbt release note, so I added one to the release notes page.

@matthewshaver matthewshaver requested a review from a team as a code owner October 22, 2024 17:21
@vercel Vercel
Copy link

vercel bot commented Oct 22, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
docs-getdbt-com ✅ Ready (Inspect) Visit Preview Nov 13, 2024 9:59pm

@github-actions github-actions bot added size: medium This change will take up to a week to address content Improvements or additions to content labels Oct 22, 2024
@matthewshaver matthewshaver changed the title Adding sortable tables [DRAFT]Adding sortable tables Oct 22, 2024
@github-actions github-actions bot added the Docs team Authored by the Docs team @dbt Labs label Oct 22, 2024
@matthewshaver matthewshaver changed the title [DRAFT]Adding sortable tables Adding sortable tables Nov 4, 2024
@mirnawong1
Copy link
Contributor

mirnawong1 commented Nov 4, 2024 •
edited
Loading

hey @matthewshaver , this looks great! however the sortable table component doesn't seem to supported elements such as bolded or line breaks, links, etc.

this is what i tested in the website/docs/docs/cloud/about-cloud/regions-ip-addresses.md file:

<SortableTable >
{`

| Region | Location | Access URL | IP addresses | Developer plan | Team plan | Enterprise plan |
|--------|----------|------------|--------------|----------------|-----------|-----------------|
| North America [^1] | AWS us-east-1 (N. Virginia) | **Multi-tenant:** cloud.getdbt.com <br /> **Cell based:** ACCOUNT_PREFIX.us1.dbt.com | 52.45.144.63 <br /> 54.81.134.249 <br />52.22.161.231 <br />52.3.77.232 <br />3.214.191.130 <br />34.233.79.135 | ✅ | ✅ | ✅ |
| EMEA [^1] | AWS eu-central-1	(Frankfurt) | emea.dbt.com | 3.123.45.39 <br /> 3.126.140.248 <br /> 3.72.153.148 | ❌ | ❌ | ✅ |
| EMEA [^1] | Azure <br /> North Europe (Ireland)  |    **Cell based:** ACCOUNT_PREFIX.eu2.dbt.com  | 20.13.190.192/26                                     | ❌ | ❌ | ✅ |
| APAC  [^1] | 	AWS ap-southeast-2  (Sydney)| au.dbt.com | 52.65.89.235 <br /> 3.106.40.33 <br /> 13.239.155.206 <br />| ❌ | ❌ | ✅ |
| Virtual Private dbt or Single tenant | Customized |  Customized | Ask [Support](/community/resources/getting-help#dbt-cloud-support) for your IPs | ❌ | ❌ | ✅ |

`}
</SortableTable>

the front end team will know more but i wonder if the solution is it needs to use a markdown parser library to support markdown and HTML for each cell?

here are the images:
Screenshot 2024-11-04 at 15 49 28
Screenshot 2024-11-04 at 15 50 32

mirnawong1
mirnawong1 approved these changes Nov 8, 2024
View reviewed changes
Copy link
Contributor

@mirnawong1 mirnawong1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i keep getting the same error but made some changes and the deploy looks good! incredible job @matthewshaver !!!

@breezyfasano breezyfasano self-requested a review November 13, 2024 17:52
breezyfasano
breezyfasano approved these changes Nov 13, 2024
View reviewed changes
website/src/components/sortableTable/index.js
return strippedText;
};

const parseMarkdownTable = (markdown) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Matt! This is a totally awesome implementation. Really nice work here. It was clever to include cases for different alignment codes for table rows in markdown - I always forget those syntax options exist!

Re: what I was saying in our meeting yesterday: if you really wanted to, you could wrap parseMarkdownTable in a useMemo hook to avoid it running on every re-render for performance reasons! But I did check out the component on the enterprise perms table, adjusted some things to re-run the state, and the performance hit is negligible.

I wouldn't say it's a blocking change IMO, but feel free to update it if you want to! All in all, this LGTM. 🚢

@matthewshaver matthewshaver merged commit 53df291 into current Nov 13, 2024
11 checks passed
@matthewshaver matthewshaver deleted the sortable-table branch November 13, 2024 22:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mirnawong1 mirnawong1 mirnawong1 approved these changes

@breezyfasano breezyfasano breezyfasano approved these changes

Assignees
No one assigned
Labels
content Improvements or additions to content Docs team Authored by the Docs team @dbt Labs size: medium This change will take up to a week to address
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@matthewshaver @mirnawong1 @breezyfasano